<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="form" :rules="rules" ref="refForm" label-width="100px">
      <el-form-item label="账户类型" prop="userType">
        <el-radio-group v-model="form.userType">
          <el-radio-button
            v-for="item in consts.ACCOUNT_TYPE"
            :key="item.value"
            :label="item.value"
          >{{item.title}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示端:" prop="showClient">
        <el-select
          :collapse-tags="true"
          v-model="form.showClient"
          placeholder="请选择显示端"
          :multiple="true"
        >
          <el-option
            v-for="item in consts.ADVER_DEVICE_TYPE_ACTIVE"
            :key="item.value"
            :label="item.title"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="主题:" prop="name">
        <el-input
          type="textarea"
          :rows="1"
          maxlength="45"
          class="article-textarea"
          autosize
          placeholder="请输入内容"
          v-model="form.name"
        ></el-input>
      </el-form-item>

      <el-form-item label="简介:" prop="summary">
        <el-input
          type="textarea"
          :rows="1"
          class="article-textarea"
          autosize
          placeholder="请输入内容"
          v-model="form.summary"
        ></el-input>
      </el-form-item>

      <el-form-item label="内容:" prop="content">
        <Tinymce :height="400" ref="editor" v-model="form.content"/>
        <!--<weditor ref="editor" v-model="form.content"></weditor>-->
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发布时间:" class="postInfo-container-item" prop="effectiveDate">
            <el-date-picker
              v-model="form.effectiveDate"
              class="filter-item"
              placeholder="开始时间"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" class="postInfo-container-item" prop="endDate">
            <el-date-picker
              v-model="form.endDate"
              class="filter-item"
              placeholder="结束时间"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button
        v-loading="loading"
        style="margin-left: 10px;"
        type="primary"
        @click="saveForm()"
        :disabled="isDisabled"
      >确定
      </el-button>
    </el-form>
  </div>
</template>

<script>
import {
  noticeAnnouncementEditApi,
  noticeAnnouncementSaveApi,
} from '@/services/api/notice';
import { form } from '@/build';
import CheckboxAll from '@/components/CheckboxAll/index';
import Tinymce from '@/components/Tinymce';

export default {
  name: 'notice-edit',
  components: {
    CheckboxAll,
    Tinymce,
  },

  mixins: [form],

  props: ['id', 'rowData'],
  data() {
    return {
      userListOptions: [],
      selectAll: false,
      isIndeterminate: false,
      isDisabled: false,
      form: {
        id: this.id,
        showClient: [],
        userType: undefined,
        summary: undefined,
        name: undefined,
        effectiveDate: '',
        endDate: '',
        content: undefined,
      },
      rules: {
        userType: {
          required: true,
          message: '账户类型必须选择',
        },
        showClient: {
          required: true,
          message: '账户类型必须选择',
        },
        summary: [
          {
            required: true,
            message: '简介必须填写',
          },
          {
            max: 255,
            message: '简介不能超过255字',
            trigger: 'blur',
          },
        ],
        name: [
          {
            required: true,
            message: '主题必须填写',
          },
          {
            max: 45,
            message: '主题不能超过45字',
            trigger: 'blur',
          },
        ],
        content: {
          required: true,
          message: '内容必须填写',
        },
        effectiveDate: {
          required: true,
          message: '发布时间必须填写',
        },
        endDate: {
          required: true,
          message: '结束时间必须填写',
        },
      },
    };
  },
  mounted() {
    if (!_.isUndefined(this.rowData) && this.rowData.id) {
      const { showClientArray, effectiveDate, endDate } = this.rowData;
      this.form = {
        ...this.rowData,
        showClient: showClientArray,
        effectiveDate: new Date(effectiveDate),
        endDate: new Date(endDate),
      };
    }

    this.bindSave(noticeAnnouncementSaveApi, 'saveForm', 'form', {
      beforeSend: (data) => {
        this.handleDisable(true);
        const {
          showClient, effectiveDate, content, endDate,
        } = data;
        const reg = /img class="wscnph" src="api/g;
        const newContent = content.replace(reg, 'img class="wscnph" src="/api');
        return {
          ...data,
          showClient: showClient.join(','),
          effectiveDate: moment(effectiveDate)
            .format('YYYY-MM-DD HH:mm:ss'),
          endDate: moment(endDate)
            .format('YYYY-MM-DD HH:mm:ss'),
          content: newContent,
        };
      },
      callback: ([result, data]) => {
        if (result) {
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2000,
          });
          this.$emit('on-success');
          if (!this.form.id) {
            this.$router.push({
              path: '/notice/notice-message',
              replace: true,
              query: {
                tab: 'one',
              },
            });
          }
        } else {
          this.$notify({
            title: `保存失败.${data && data.message}`,
            type: 'error',
            duration: 2000,
          });
          this.handleDisable(false);
        }
      },
    });
  },
  methods: {
    imageSuccessCBK(arr) {
      arr.forEach((picInfo) => {
        this.form.backgroundPic = picInfo.url;
      });
    },
    // 是否开启和禁用发送
    handleDisable(val) {
      this.isDisabled = val;
    },
    saveForm() {
      this.doSave({
        action: 'saveForm',
        form: {
          name: 'refForm',
          scrollToError: true,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .image {
    width: 100px;
    height: 100px;
  }
</style>
